<!-- 订单详情 -->
<template>
	<publicPage>
		<view class="orderDetailsPage">
			<view
				v-if="info.callType == 2 && info.sonStatus == 53"
				class="px-15 py-13"
				style="background-color: #c7ebff"
			>
				<view class="fw-7"
					>前方还有<text class="px-3" style="color: #e97205">{{ info.orderOrd.wailnum }}</text
					>人等待咨询，请耐心等候专家呼叫，</view
				>
				<view class="fw-7"
					>您的咨询号为<text class="px-3" style="color: #e97205">{{
						info.orderOrd.listno
					}}</text></view
				>
			</view>
			<view
				v-if="info.callType == 2 && info.sonStatus == 54"
				class="px-15 py-13"
				style="background-color: #f9ae3d"
			>
				<view class="fw-7"
					>订单已过期,原因：您在规定的预约时间段未签到排号，订单将在24小时后自动退款!</view
				>
			</view>
			<view
				v-if="info.callType == 3 && info.sonStatus == 60"
				class="px-15 py-13"
				style="background-color: #c7ebff"
			>
				<view class="fw-7"
					>您的核销码：<text style="color: #e97205">{{ info.checkCode }}</text></view
				>
				<view class="pt-4 fz-12">请持核销码去服务机构核销已付费项目</view>
			</view>

			<view class="disFlxJS linh-44 px-15 fz-16 color8 borderB">
				<view
					>订单类型：{{
						info.callType == 3 ? "服务项目" : info.callType == 2 ? "预约咨询" : "即时咨询"
					}}</view
				>
				<view :style="'color: ' + sonStatusFind(info.sonStatus, 'colors')">{{
					sonStatusFind(info.sonStatus, "label")
				}}</view>
			</view>
			<view v-if="info.callType == 3" class="py-10">
				<view class="disFlxJS linh-26 px-15">
					<view class="shrink0 pr-50">服务机构</view>
					<view>{{ info.checkAgencyName }}</view>
				</view>
				<view class="disFlxJS linh-26 px-15">
					<view class="shrink0 pr-50">申请医生</view>
					<view>{{ info.sponsor }}</view>
				</view>
			</view>
			<template v-else>
				<InfoCard
					v-for="(item, index) in info.expList"
					v-if="item.start !== '1'"
					:key="index"
					:item="item"
					:showStatus="false"
				/>
			</template>

			<view v-if="!userInfo.mpOpenid" class="pa-15 borderTop30 borderB disFlxAC">
				<view class="pr-15">
					<view>接收医生问诊消息、预约进度及查看就诊进度。</view>
					<view class="pt-10 disFlxAC" style="color: #ea5e0e"
						>长按识别，微信扫一扫关注公众号
						<image
							src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/arrowsRight.png"
							class="ml-5"
							style="width: 40rpx"
							mode="widthFix"
						/>
					</view>
				</view>
				<image
					src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/accountQrcode.png"
					style="width: 160rpx; height: 160rpx; flex-shrink: 0"
					show-menu-by-longpress
				/>
			</view>

			<view v-if="info.mailingInfo" class="pb-10">
				<view class="linh-44 px-15 fz-16 color8 borderTop30 borderB">物流信息</view>
				<view class="disFlxJS linh-26 px-15 pt-10"> 
					<view class="shrink0 pr-50">物流方式</view>
          <view v-if="info.mailingInfo.logisticType === 0 && info.mailingInfo.mailingWay === 3">快递（邮寄给患者）</view>
          <view v-if="info.mailingInfo.logisticType === 0 && info.mailingInfo.mailingWay === 2">快递（邮寄给诊所）</view>
          <view v-if="info.mailingInfo.logisticType === 1">用户自提</view>
          <view v-if="info.mailingInfo.logisticType === 2">无需物流</view>
          <view v-if="info.mailingInfo.logisticType === 3">同城配送</view>
				</view>
				<template v-if="info.mailingInfo.mailingWay">
					<view v-if="info.mailingInfo.expressNumber" class="linh-26 px-15">
						【已发货】 {{ info.mailingInfo.expressBrand }} {{ info.mailingInfo.expressNumber }}
					</view>
					<view v-if="info.mailingInfo.recipientName" class="disFlxJS linh-26 px-15">
						<view class="shrink0 pr-50">收货人</view>
						<view>{{ info.mailingInfo.recipientName || "-" }}</view>
					</view>
					<view v-if="info.mailingInfo.recipientPhone" class="disFlxJS linh-26 px-15">
						<view class="shrink0 pr-50">手机号</view>
						<view>{{ info.mailingInfo.recipientPhone || "-" }}</view>
					</view>
					<view v-if="info.mailingInfo.mailingAddr" class="disFlxJS flexAlignTop linh-20 py-3 px-15">
						<view class="shrink0 pr-50">地址</view>
						<view>{{ info.mailingInfo.mailingAddr || "-" }}</view>
					</view>
				</template>
			</view>

			<view class="linh-44 px-15 fz-16 color8 borderTop30 borderB">{{
				info.callType == 3 ? "消费人信息" : "患者资料"
			}}</view>
			<view class="py-10">
				<view v-if="info.callType == 2" class="disFlxJS linh-26 px-15">
					<view class="shrink0 pr-50">预约发起人</view>
					<view>{{ info.sponsor }}</view>
				</view>
				<view v-else class="disFlxJS linh-26 px-15">
					<view class="shrink0 pr-50">{{ info.callType == 3 ? "消费人" : "咨询人" }}</view>
					<view>{{ info.username }}</view>
				</view>
				<view class="disFlxJS linh-26 px-15">
					<view class="shrink0 pr-50">{{ info.callType == 3 ? "消费人电话" : "联系电话" }}</view>
					<view>{{ info.userphone || "" }}</view>
				</view>
				<view v-if="info.callType == 1" class="disFlxJS linh-26 px-15">
					<view class="shrink0 pr-50">咨询时间</view>
					<view>{{ info.createTime }}</view>
				</view>
				<view v-if="info.callType == 2">
					<view
						v-if="info.orderOrd.patientName"
						class="disFlxJS linh-26 px-15"
						style="align-items: flex-start"
					>
						<view class="shrink0 pr-50">咨询人信息</view>
						<view>{{ info.orderOrd.patientName }} {{ info.orderOrd.patientPhone || "-" }}</view>
					</view>
					<view class="disFlxJS linh-26 px-15" style="align-items: flex-start">
						<view class="shrink0 pr-50">咨询内容</view>
						<view>
							<view>{{ info.orderOrd.ordtext || "-" }}</view>
							<view
								v-if="info.orderOrd.imgs.length"
								class="py-5"
								style="display: grid; grid-template-columns: repeat(3, 150rpx); gap: 10rpx"
							>
								<image
									v-for="url in info.orderOrd.imgs"
									:src="url"
									style="width: 150rpx; height: 150rpx;"
                  mode="aspectFill"
                  @click="openPreview(url)"
								/>
							</view>
						</view>
					</view>
					<view class="disFlxJS linh-26 px-15">
						<view class="shrink0 pr-50">预约时间</view>
						<view>{{ info.orderOrd.ortStr }}</view>
					</view>
					<view v-if="info.orderOrd.signtime" class="disFlxJS linh-26 px-15">
						<view class="shrink0 pr-50">签到时间</view>
						<view>{{ info.orderOrd.signtime }}</view>
					</view>
				</view>

				<view v-if="info.callType == 3">
					<view class="disFlxJS linh-26 px-15" style="align-items: flex-start">
						<view class="shrink0 pr-50">初步诊断</view>
						<view>{{ info.initialDiagn || "-" }}</view>
					</view>
					<view class="disFlxJS linh-26 px-15" style="align-items: flex-start">
						<view class="shrink0 pr-50">病情摘要</view>
						<view>{{ info.diseaseDigest || "-" }}</view>
					</view>
				</view>
			</view>

			<template v-if="info.callType == 3">
				<view v-for="(item, index) in info.sheetList" :key="index" class="borderTop30">
					<view class="linh-44 px-15 borderB disFlxJS">
						<view class="shrink0 pr-10 disFlxAC">
							<text class="fz-16 color8 pr-10">{{ getServiceItemsTitle(item.serviceItems) }}</text>
							<u-tag
								v-if="
									item.serviceItems == 4 &&
									(item.dictLabel === '中药饮片' ||
										item.dictLabel === '中药颗粒' ||
										item.dictLabel === '西药')
								"
								:text="item.dictLabel"
								type="warning"
								size="mini"
							></u-tag>
						</view>
						<view class="fz-12">
							<text class="px-2">{{
								item.takeType === 1 ? "口服," : item.takeType === 2 ? "外用," : ""
							}}</text>
							<text v-if="item.usageDose" class="px-2">每日{{ item.usageDose }}次,</text>
							<template v-if="item.serviceItems == 4 && item.prescriptNum">
								<text class="px-2"
									>每剂 <text class="colorY px-2">{{ item.itemNum }}</text> 项,</text
								>
								<text
									>共 <text class="colorY px-2">{{ item.prescriptNum }}</text> 剂</text
								>
							</template>
							<text v-else class="px-2"
								>共 <text class="colorY px-2">{{ item.itemNum }}</text> 项</text
							>
						</view>
					</view>
					<view class="py-10">
						<view
							v-for="checkItem in item.checkItem"
							:key="checkItem.itemId"
							class="disFlxJS linh-26 px-15"
						>
							<view>{{ checkItem.itemName }}</view>
							<view>{{ checkItem.specsNum }}{{ checkItem.unit || "项" }}</view>
						</view>
						<view v-if="item.subCost" class="borderT px-15 py-5 mt-10" style="text-align: right"
							>小计: <text class="colorY pl-5">{{ item.subCost }}云豆</text></view
						>
					</view>
				</view>
			</template>

			<view class="linh-44 px-15 fz-16 color8 borderTop30 borderB">订单金额</view>
			<view class="disFlxJS linh-26 px-15 pt-10">
				<view class="shrink0 pr-50">订单金额</view>
				<view class="colorY">{{ info.costOriginal || 0 }}云豆</view>
			</view>
			<view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">优惠金额</view>
				<view class="colorY"
					>{{ info.costOriginal === info.cost ? 0 : minus(info.costOriginal, info.cost) }}云豆</view
				>
			</view>
			<view class="disFlxJS linh-26 px-15 pb-10">
				<view class="shrink0 pr-50">{{
					info.status == 0 || info.status == 2 || info.status == 3 ? "实付金额" : "需付金额"
				}}</view>
				<view class="colorY">{{ info.cost || 0 }}云豆</view>
			</view>

			<view class="linh-44 px-15 fz-16 color8 borderTop30 borderB">订单信息</view>
			<view class="disFlxJS linh-26 px-15 pt-10">
				<view class="shrink0 pr-50">订单编号</view>
				<view>{{ info.orderNo }}</view>
			</view>
			<view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">下单时间</view>
				<view>{{ info.createTime }}</view>
			</view>
			<view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">支付时间</view>
				<view>{{ info.playCreateTime || "" }}</view>
			</view>
			<view class="disFlxJS linh-26 px-15 pb-10">
				<view class="shrink0 pr-50">支付方式</view>
				<view>余额支付</view>
			</view>

			<view class="fexdBtn">
				<OrderBtnList page="orderDetails" :item="info" @upList="getList" />
			</view>

      <ImagePreview ref="ImagePreview" />
		</view>
	</publicPage>
</template>

<script>
import orderApi from "@/api/order.js";
import InfoCard from "@/components/infoCard.vue";
import OrderBtnList from "./orderBtnList.vue";
import { minus } from "@/uview-ui/libs/function/digit.js";
import ImagePreview from '@/components/imagePreview.vue'

export default {
	components: {
		InfoCard,
		OrderBtnList,
    ImagePreview
	},
	computed: {
		// 用户信息
		userInfo() {
			return this.$store.state.userInfo;
		},
	},
	data() {
		return {
			orderNo: "",
			info: {},
			sonStatus: [
				{ label: "待付款", value: "10", colors: "#0D8BFF" }, // 待专家付款 显示关闭订单按钮
				{ label: "待付款", value: "11", colors: "#0D8BFF" }, // 待用户付款 显示关闭订单按钮
				{ label: "未接听", value: "21", colors: "#FF5F5F" }, // 显示 呼叫(即时咨询),取消订单
				{ label: "待通话", value: "22", colors: "#0D8BFF" }, // 显示 呼叫(即时咨询),取消订单
				{ label: "通话中", value: "23", colors: "#BB9313" }, // 显示 加入会议(即时咨询)
				{ label: "已预约", value: "51", colors: "#333333" }, // 显示 取消订单(预约咨询)
				{ label: "待签到", value: "52", colors: "#0D8BFF" }, // 显示 立即签到,取消订单(预约咨询)
				{ label: "已签到", value: "53", colors: "#333333" }, // 显示 取消订单(预约咨询)
				{ label: "已过期", value: "54", colors: "#333333" }, // 显示 查看详情
				{ label: "待核销", value: "60", colors: "#0D8BFF" }, // 显示 取消订单(服务项目)
				{ label: "已核销", value: "61", colors: "#333333" }, // 无操作
				{ label: "待使用", value: "62", colors: "#0D8BFF" }, // 无操作
				{ label: "待发货", value: "63", colors: "#0D8BFF" }, // 无操作
				{ label: "待收货", value: "64", colors: "#0D8BFF" }, // 显示 确认收货
				{ label: "已发货", value: "65", colors: "#333333" }, // 无操作
				{ label: "已完成", value: "71", colors: "#333333" }, // 24H重呼(即时咨询)
				{ label: "已退款", value: "72", colors: "#FF5F5F" }, // 无操作
				{ label: "已取消", value: "73", colors: "#FF5F5F" }, // 无操作
				{ label: "已关闭", value: "74", colors: "#FF5F5F" }, // 无操作
			],
		};
	},
	onLoad(options) {
		this.orderNo = options.orderNo;
		this.getList();
	},
	methods: {
		minus,
		// 获取订单详情
		getList() {
			orderApi.getOrderDetail({ orderNo: this.orderNo }).then((res) => {
				this.info = res.data.info;
				console.log(this.info, "订单详情");
			});
		},
		// 获取订单状态
		sonStatusFind(val, keys) {
			if (!val) return;
			const obj = this.sonStatus.find((v) => v.value === val);
			if (!obj) {
				console.log(obj, "后端订单状态异常对象");
			}
			return obj[keys];
		},
		getServiceItemsTitle(type) {
			switch (Number(type)) {
				case 3:
					return "检验检查";
				case 4:
					return "药品类";
				default:
					return "其他类";
			}
		},
    openPreview(src) {
      this.$refs.ImagePreview.openModal(src);
    }
	},
};
</script>
<style lang="scss" scoped>
.orderDetailsPage {
	background-color: #ffffff;
	padding-bottom: 120rpx;
	.fexdBtn {
		background-color: #ffffff;
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		padding-bottom: 10rpx;
	}
	.colorY {
		color: #bb9313;
	}
}
</style>
